<template>
  <div class="ldzs">
    <div id="echartsLdzs" />
  </div>
</template>

<script>
import Sever from '@/api/selfApi'
export default {
  props: {
    depCode: {
      type: String
    }
  },
  data() {
    return {
      echartsLdzs: null,
      options: { XZLDZS: 0, XZLDZZ: 0, SYLDZS: 0, SYLDZZ: 0 }
    }
  },
  watch: {
    depCode(newValue, oldValue) {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      //请求后台返回数据
      try {
        //请求后台接口
        const res = await Sever.map.getLdzsAndLdzz({
          dep_code: this.depCode
        })
        console.log(res)
        //赋值给变量
        this.options = res
      } catch (error) {
        console.log(error)
      }
      var xData = ['处级领导职数', '处级领导实配']
      if (this.depCode != '450000') {
        xData = ['科级领导职数', '科级领导实配']
      }
      var lastYearData = [this.options.XZLDZS, this.options.SYLDZS]
      var thisYearData = [this.options.XZLDZZ, this.options.SYLDZZ]
      var legend = ['行政', '事业']
      var textColor = '#fff'
      var lineColor = 'rgba(255,255,255,0.2)'
      var colors = [
        {
          borderColor: 'rgba(255,204,0,1)',
          start: 'rgba(255,204,0,1)',
          end: 'rgba(255,204,0,0)'
        },
        {
          borderColor: 'rgba(250,88,50,1)',
          start: 'rgba(250,88,50,0)',
          end: 'rgba(250,88,50,1)'
        }
      ]

      var option = {
        baseOption: {
          tooltip: { show: true },
          timeline: {
            show: false,
            top: 0,
            data: []
          },
          legend: {
            top: '10',
            right: 'center',
            width: '100%',
            itemWidth: 0,
            itemHeight: 0,
            itemGap: 150,
            orient: 'horizontal',
            textStyle: {
              color: '#70c5ff',
              fontSize: 20,
              fontWeight: '700'
            },
            data: legend
          },
          grid: [
            {
              show: false,
              left: '3%',
              top: '20%',
              bottom: '11%',
              containLabel: true,
              width: '36%'
            },
            {
              show: false,
              left: '52%',
              top: '20%',
              bottom: '11%',
              width: '0%'
            },
            {
              show: false,
              right: '3%',
              top: '20%',
              bottom: '11%',
              containLabel: true,
              width: '36%'
            }
          ],
          xAxis: [
            {
              type: 'value',
              inverse: true,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              position: 'top',
              axisLabel: {
                show: false,
                color: textColor
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: lineColor
                }
              }
            },
            {
              gridIndex: 1,
              show: false
            },
            {
              gridIndex: 2,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              position: 'top',
              axisLabel: {
                show: false,
                color: textColor
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: lineColor
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'category',
              inverse: true,
              position: 'right',
              axisLine: {
                show: false,
                lineStyle: {
                  color: lineColor
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              data: xData
            },
            {
              gridIndex: 1,
              type: 'category',
              inverse: true,
              position: 'left',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                width: '100%',
                padding: [0, 10, 0, 10],
                textStyle: {
                  color: '#ffffff',
                  fontSize: 16
                },
                ellipsis: '...',
                align: 'center'
              },
              data: xData
            },
            {
              gridIndex: 2,
              type: 'category',
              inverse: true,
              position: 'left',
              axisLine: {
                show: false,
                lineStyle: {
                  color: lineColor
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              data: ''
            }
          ],
          series: [
            {
              name: '行政',
              type: 'bar',
              barWidth: 30,
              stack: '1',
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: colors[0].start
                    },
                    {
                      offset: 1,
                      color: colors[0].end
                    }
                  ])
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'inside',
                  color: '#fff',
                  fontSize: 20,
                  fontWeight: 'bolder'
                }
              },
              data: lastYearData,
              animationEasing: 'elasticOut'
            },
            {
              name: '事业',
              type: 'bar',
              stack: '2',
              barWidth: 30,
              xAxisIndex: 2,
              yAxisIndex: 2,
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: colors[1].start
                    },
                    {
                      offset: 1,
                      color: colors[1].end
                    }
                  ])
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'inside',
                  color: '#fff',
                  fontSize: 20,
                  fontWeight: 'bolder'
                }
              },
              data: thisYearData,
              animationEasing: 'elasticOut'
            }
          ]
        }
      }

      option.baseOption.yAxis[1].data = xData.map(function (value) {
        const str = value.length > 6 ? value.substring(0, 6) + '...' : value
        return {
          value: str,
          textStyle: {
            align: 'center'
          }
        }
      })

      // 基于准备好的dom，初始化echarts实例
      this.echartsLdzs = this.$echarts.init(
        document.getElementById('echartsLdzs')
      )
      option && this.echartsLdzs.setOption(option, true)
      window.addEventListener('resize', () => this.echartsLdzs.resize(), false)
    }
  }
}
</script>

<style lang='scss'>
.ldzs {
  margin-top: 1%;
  margin-bottom: 1%;
  width: 100%;
  height: 20%;
  background: rgba(0, 18, 67, 0.4);

  #echartsLdzs {
    width: 100%;
    height: 100%;
    text-align: center;
    font-family: electronicFont;
    font-size: 24px;
  }
}
</style>
